<template>
  <div id="app" :class="{ applang: lang !== 'zh_TW' }">
    <div class="startUp" v-if="countdown > 0">
      <img src="./assets/images/logo.gif" alt="" style="opacity: 0;">
    </div>
    <router-view></router-view>
    <loading v-show="showloading"></loading>
    <van-popup
      v-model="showrecharge"
      class="modalbg"
      :close-on-click-overlay="false"
      round
    >
      <div class="modal-recharge">
        <div class="recharge-title">
          <img src="./assets/images/rechargeicon1.png" alt="" />
          {{ $t("title.doc58") }}
        </div>
        <div class="recharge-time">
          <van-count-down :time="modalinfo.countdownSecond * 1000">
            <template #default="timeData">
              <!-- <span class="block">{{ common.stuff(timeData.days) }}</span>
              <span class="colon">:</span> -->
              <span class="block">{{
                common.stuff(gethour(timeData.hours, timeData.days))
              }}</span>
              <span class="colon">:</span>
              <span class="block">{{ common.stuff(timeData.minutes) }}</span>
              <span class="colon">:</span>
              <span class="block">{{ common.stuff(timeData.seconds) }}</span>
            </template>
          </van-count-down>
        </div>
        <div class="recharge-tips">{{ $t("title.doc59") }}</div>
        <div class="recharge-price">
          <div class="price-info">
            <div>{{ $t("title.doc60") }}</div>
            <p>{{ common.decal2(modalinfo.balance) }} USDT</p>
          </div>
          <div class="price-info">
            <div>{{ $t("title.doc61") }}</div>
            <p>
              {{ common.decal2(modalinfo.balance) }}×{{
                getrate(modalinfo.taxRate)
              }}%={{ common.decal2(modalinfo.taxAmount) }} USDT
            </p>
          </div>
        </div>
        <div class="recharge-btn">
          <div @click="handlerclose1">
            <p>{{ $t("title.doc55") }}</p>
          </div>
          <div @click="handlerrouter">{{ $t("title.doc56") }}</div>
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model="showfailed"
      class="modalbg"
      :close-on-click-overlay="false"
      round
    >
      <div class="modal-failed">
        <img
          src="./assets/images/closeicon.png"
          alt=""
          class="closeimg"
          @click="handlerclose"
        />
        <div class="img">
          <img src="./assets/images/failedimg.png" alt="" />
        </div>
        <div class="failed-title">{{ $t("title.doc62") }}</div>
        <div class="failed-desc" v-html="tipsinfo.description"></div>
      </div>
    </van-popup>

    <ModalPop
      v-model="showConfigPop"
      :title="$t('title.doc54')"
      :confirmText="$t('page4.doc64')"
      :cancelText="$t('page4.doc63')"
      :cancel-btn-show="true"
      :text="$t('new.doc59')"
      @confirm="onConfirm"
      @cancel="showConfigPop = false"
    >
    </ModalPop>
  </div>
</template>

<script>
import { bus } from "./utils/http";
import { mapMutations, mapActions } from "vuex";
import store from "./store";
import { Toast } from "vant";
import VueI18n from "vue-i18n";
import router from "./router";
import FloatingBubble from "./components/seepup.vue";

export default {
  name: "App",
  components: {
    FloatingBubble,
  },
  data() {
    return {
      showfailed: false,
      showrecharge: false,
      showrecharge1: true,
      listTop: false,
      showloading: false,
      channelList: [],
      lang: this.$store.state.lang,
      pageAnimate: "back",
      countdown: 5, // 初始倒计时为10秒
      timer: null,
      tipsinfo: {},
      showtime: false,
      showConfigPop: false,
      modalinfo: {},
    };
  },

  created() {
    if (localStorage.getItem("language") != undefined) {
      this.$i18n.locale = localStorage.getItem("language");
    } else {
      //默认中文
      this.$i18n.locale = "en_US";
    }
    this.showloading = false;
    this.showrecharge = false;
    this.showfailed = false;
    if (this.$store.state.isLogin) {
      setTimeout(() => {
        this.$post(this.URL.home.taxinfo, {}).then((res) => {
          if (res.code == 0) {
            if (!res.data.hasOpen) {
              bus.$emit("showpopup", 0);
            } else if (window.location.pathname != "/wallet/recharge") {
              bus.$emit("showpopup", res.data);
            } else {
              bus.$emit("showpopup", 0);
            }
          }
        });
      }, 5000);
    }
  },
  methods: {
    ...mapMutations(["SET_ISAPPINFO"]),
    // ...mapActions(["Get_userData"]),
    onConfirm() {
      this.showConfigPop = false;
      this.showrecharge = false;
      bus.$emit("shownotice");
    },
    gethour(h, d) {
      return parseFloat(h + d * 24);
    },
    getrate(num) {
      let num1 = parseFloat(num) * 100;
      return this.common.decal2(num1);
    },
    handlerclose() {
      localStorage.setItem("closemodal", 1);
      this.showfailed = false;
      bus.$emit("shownotice");
    },
    handlerclose1() {
      this.showrecharge = false;
      this.showConfigPop = true;
    },
    handlerrouter() {
      this.showrecharge = false;
      this.$router.push("/wallet/recharge");
    },
    getTipsInfo() {
      const params = { categoryType: "PAYMENT_FAILED" };
      this.$post(this.URL.home.article, params).then((res) => {
        if (res.code == 0) {
          this.tipsinfo = res.data;
        }
      });
    },
    ClickTop() {
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },

    handleScroll() {
      let t = document.documentElement.scrollTop || document.body.scrollTop;
      if (t > 2000) {
        this.listTop = true;
      } else {
        this.listTop = false;
      }
    },
  },
  mounted() {
    let _this = this;
    this.timer = setInterval(() => {
      if (this.countdown > 0) {
        this.countdown--;
      } else {
      }
    }, 1000);
    // document.title = this.$t(this.$route.meta.title);
    window.addEventListener("scroll", this.handleScroll, true);
    bus.$on("showpopup", function (data) {
      if (data == 0) {
        _this.showfailed = false;
        _this.showrecharge = false;
        bus.$emit("shownotice");
        return;
      }
      _this.$store.commit("SET_TAX_INFO", data);
      _this.modalinfo = data;
      if (data.status == 0) {
        _this.showrecharge = true;
      } else if (data.status == 2) {
        if (localStorage.getItem("closemodal") == null) {
          _this.showfailed = true;
          _this.getTipsInfo();
        } else {
          _this.showrecharge = true;
        }
      } else {
        bus.$emit("shownotice");
      }
    });
  },

  beforeEach(to, from, next) {},

  watch: {
    $route(to, from, d) {
      if (this.$route.meta.title != "") {
        this.lang = this.$store.state.lang;
        document.title = this.$t(this.$route.meta.title);
      }
      if (this.$route.meta.isUS) {
        var _this = this;
        bus.$on("showloading", function () {
          _this.showloading = false;
        });
        bus.$on("closeLoading", function () {
          _this.showloading = false;
        });
      } else {
        var _this = this;
        bus.$on("showloading", function () {
          _this.showloading = true;
        });
        bus.$on("closeLoading", function () {
          _this.showloading = false;
        });
      }
      // 路由切换翻页效果
      if (this.$store.state.historyRouter.includes(to.path)) {
        this.pageAnimate = "back";
      } else {
        this.pageAnimate = "forward";
      }
      //保存路由
      let historyRouter = this.$store.state.historyRouter;
      let routerMaxLen = this.$store.state.routerMaxLen; //路由最大长度
      if (!historyRouter.includes(to.path)) {
        historyRouter.push(to.path);
      }
      if (historyRouter.length > routerMaxLen) {
        historyRouter.splice(0, 1);
      }
      this.$store.dispatch("changeState", {
        attr: "historyRouter",
        params: historyRouter,
      });
    },
  },
};
</script>

<style lang="less">
.modalbg {
  //background-color: #121622 !important;
  overflow: hidden;
  padding: 0.04rem;
  background: linear-gradient(90deg, #7b02fe 0%, #0570fd 100%) !important;
  // &:before {
  //   content: "";
  //   width: 200%;
  //   aspect-ratio: 1 / 1;
  //   background-color: #121622;
  //   position: absolute;
  //   left: 50%;
  //   top: 50%;
  //   background-image: conic-gradient(transparent, #7B02FE, #121622, #121622, #0570FD, transparent 100%);
  //   z-index: 0;
  //   animation: rotate 5s linear infinite;
  // }

  @keyframes rotate {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(720deg);
    }
  }
}

.modal-failed {
  width: calc(100vw - 1.04rem);
  max-width: 7.5rem;
  padding: 0.4rem;
  position: relative;
  background: #151515;
  border-radius: 0.3rem;

  .closeimg {
    position: absolute;
    top: 0.48rem;
    right: 0.48rem;
    width: 0.32rem;
    height: 0.32rem;
  }

  .img {
    text-align: center;

    img {
      width: 1.24rem;
      height: 1.24rem;
    }
  }

  .failed-title {
    margin: 0.24rem 0 0.32rem;
    font-size: 0.4rem;
    color: #ff0000;
    text-align: center;
  }

  .failed-desc {
    font-size: 0.28rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 0.4rem !important;
    text-align: center !important;
  }
}

.modal-recharge {
  position: relative;
  width: calc(100vw - 1.04rem);
  max-width: 7.5rem;
  padding: 0.4rem;
  background: #151515;
  border-radius: 0.3rem;
  z-index: 2;

  .recharge-title {
    display: flex;
    justify-content: center;
    font-size: 0.32rem;
    color: #ffffff;
    font-weight: 600;
    line-height: 0.48rem;

    img {
      width: 0.48rem;
      height: 0.48rem;
      margin-right: 0.08rem;
    }
  }

  .recharge-time {
    margin: 0.24rem 0 0.4rem;
    display: flex;
    justify-content: center;

    .block {
      display: inline-table;
      width: 0.8rem;
      height: 0.72rem;
      background: #1b202d;
      border-radius: 0.12rem;
      text-align: center;
      font-size: 0.48rem;
      color: #ff0000;
      line-height: 0.72rem;
    }

    .colon {
      padding: 0 0.16rem;
      font-size: 0.48rem;
      font-size: #282e3c;
      font-weight: bold;
      line-height: 0.72rem;
    }
  }

  .recharge-tips {
    padding-bottom: 0.4rem;
    font-size: 0.28rem;
    color: #0bca57;
    line-height: 0.28rem;
    border-bottom: 0.02rem solid #282e3c;
  }

  .recharge-price {
    padding: 0.08rem 0 0.48rem;

    .price-info {
      margin-top: 0.32rem;
      display: flex;
      font-size: 0.28rem;
      line-height: 0.28rem;

      div {
        flex: 0 0 35%;
        color: #bdbdbd;
      }

      p {
        flex: 1;
        text-align: right;
        color: #fff;
        word-break: break-all;
      }
    }
  }

  .recharge-btn {
    display: flex;
    justify-content: space-between;

    div {
      flex: 1;
      height: 0.88rem;
      padding: 0.02rem;
      background: linear-gradient(90deg, #7b02fe 0%, #0570fd 100%);
      border-radius: 0.48rem;
      font-size: 0.32rem;
      color: #ffffff;
      text-align: center;
      line-height: 0.84rem;
      box-sizing: border-box;

      &:first-child {
        margin-right: 0.26rem;

        p {
          height: 0.84rem;
          background: #1a202e;
          border-radius: 0.4rem;
        }
      }
    }
  }
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(720deg);
  }
}

.van-toast {
  max-width: 5.8rem !important;
}

.videoList .van-rate__icon {
  font-size: 0.24rem;
}

///***（过度开始）***/
//.forward-enter,
//.forward-leave {
//  transform: translateX(100%);
//}
//.back-enter,
//.back-leave {
//  transform: translateX(-100%);
//}
///***（过度进行中）***/
//.forward-enter-active,
//.forward-leave-active,
//.back-enter-active,
//.back-leave-active {
//  transition: all .5s;
//}
///***（过度结束）***/
//.forward-enter-to {
//  transform: translateX(0);
//}
//.forward-leave-to {
//  transform: translateX(-100%);
//}
//.back-enter-to {
//  transform: translateX(0);
//}
//.back-leave-to {
//  transform: translateX(100%);
//}
//
//@keyframes fold-left-in {
//  0% {
//    transform: translate3d(100%, 0, 0);
//  }
//  100% {
//    transform: translate3d(0, 0, 0);
//  }
//}
//
//@keyframes fold-left-out {
//  0% {
//    transform: translate3d(0, 0, 0);
//  }
//  100% {
//    transform: translate3d(-100%, 0, 0);
//  }
//}
///* 右进 */
//@keyframes fold-right-in {
//  0% {
//    transform: translate3d(-100%, 0, 0);
//  }
//  100% {
//    transform: translate3d(0, 0, 0);
//  }
//}
//
//@keyframes fold-right-out {
//  0% {
//    transform: translate3d(0, 0, 0);
//  }
//  100% {
//    transform: translate3d(100%, 0, 0);
//  }
//}

//.home {
//  position: absolute;overflow: auto;
//  max-width: 10rem;
//  width: 100%;
//  height: 100%;
//}

//.w856 {
//
//  min-height: 100%;
//}
#app {
  background: #151515;
  position: relative;
  min-height: 100vh;
  height: 100%;
  word-wrap: break-word;
  word-break: normal;
  width: 100%;
  max-width: 8.5rem;

  margin: 0 auto;
  background-size: 100% 100%;
  overflow: hidden;

  .Top {
    position: fixed;
    right: 0.2rem;
    bottom: 1.54rem;

    img {
      height: 0.48rem;
      width: 0.48rem;
    }
  }

  .foot_h {
    height: 1.38rem;
  }

  .van-empty__image {
    height: auto;
  }

  .empty {
    text-align: center;
    padding: 1rem 0;

    img {
      height: 2rem;
      width: auto !important;
      max-width: 100%;
    }

    p {
      display: block;
      color: #999;
      margin-top: 0.4rem;
    }
  }
}

.itemBox {
  border-radius: 0.16rem;
  background: #1a202e;
  box-shadow: 0px 0.1rem 0.2rem 0px rgba(0, 0, 0, 0.06);
  margin-bottom: 0.24rem;
  padding: 0.24rem;
}

.van-popup--bottom {
  left: auto !important;
  max-width: 8.5rem;
}

.pop_type {
  .name {
    font-size: 0.32rem;
    text-align: center;
    color: #222222;
    line-height: 0.44rem;
    padding: 0.28rem 0;
  }

  .scroll {
    max-height: 5rem;
    overflow: scroll;
  }

  .esc {
    border-top: 0.1rem solid #f2f2f2;
    padding: 0.32rem 0;
    font-size: 0.32rem;
    font-weight: 500;
    color: #3e9aff;
    text-align: center;
  }
}

.area_pop {
  color: #333;

  .title {
    font-size: 0.32rem;
    text-align: center;
    padding: 0.3rem;

    .abs {
      right: 0.3rem;
      top: 0.35rem;

      i {
        font-size: 0.32rem;
      }
    }
  }

  .tip {
    padding: 0.2rem 0.3rem;
    border-top: 0.02rem solid #eee;
    display: none;
  }

  .so {
    height: 0.8rem;
    background: #f5f5f5;
    margin: 0 0.3rem;
    border-radius: 0.12rem;
    padding: 0 0.1rem;

    .ico {
      background: url("assets/images/ico_so.png") no-repeat center center;
      width: 0.5rem;
      height: 0.8rem;
      background-size: 0.3rem auto;
    }

    .flexs {
      margin-left: 0.16rem;
    }

    input {
      width: 100%;
      background: none;
      border: 0;

      &::placeholder {
        color: #999;
      }
    }

    .closes {
      margin-right: 0.1rem;

      img {
        height: 0.32rem;
      }
    }
  }

  ul {
    height: 4.5rem;
    overflow: auto;
    margin: 0 0.3rem;

    li {
      border-bottom: 0.02rem solid #e8edf3;
      padding: 0.22rem 0;

      .ico {
        margin-right: 0.2rem;

        img {
          height: 0.32rem;
        }
      }
    }
  }
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.password_pop {
  .van-number-keyboard {
    position: relative;
  }

  .van-password-input__security li {
    width: 0.96rem;
    height: 0.96rem;
    background: #000000;
    border-radius: 0.16rem;
    color: #fff;
  }

  .van-password-input {
    margin: 0;
  }

  .van-password-input__cursor {
    background: #ffffff;
  }

  .van-number-keyboard {
    background: none;

    .van-key {
      width: 2.3rem;
      height: 0.96rem;
      background: #fff;
      color: #000;
      border-radius: 0.08rem;
    }
  }

  .pass {
    background: #26292d;
    border-radius: 0.2rem 0.2rem 0 0;
    padding: 0.4rem 0.36rem;
    color: #fff;

    .van-password-input__item--focus {
      border: 0.02rem solid #f2c409;
    }

    //光标
    .van-password-input__cursor {
      background: #f2c409;
    }

    //密码原点
    .van-password-input__security i {
      background: #fff;
    }

    button {
      width: 100%;
      border: 0;
      height: 0.94rem;
      border-radius: 1.8rem;
      color: #000;
      background: linear-gradient(180deg, #f8f8e0 0%, #f5b975 100%);
    }

    .box {
      padding: 0.48rem 0;

      .abs {
        width: 100%;
        height: 0.9rem;
        opacity: 0;
        z-index: 2;
      }
    }
  }

  .jianpan {
    background: #26292d;
    //margin-top: 1rem;
    color: #fff;

    p {
      line-height: 0.76rem;
      text-align: center;
    }
  }

  .title {
    font-size: 0.3rem;
    font-weight: 500;
    line-height: 0.42rem;

    .abs {
      right: 0;
      top: 0;

      i {
        font-size: 0.3rem;
      }
    }
  }
}

.bg {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 8.5rem;
  // background: url(assets/images/bg-html.png) no-repeat top center;
  // background-size: cover;
  height: 100vh;
}

.videoList {
  margin-bottom: 0.16rem;

  .cname {
    align-items: center;
    color: #fff;
    margin-bottom: 0.24rem;

    .n {
      font-size: 0.32rem;
      font-weight: 600;
      line-height: 0.3rem;
      letter-spacing: 0.015rem;
    }

    .v {
      font-size: 0.24rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #bdbdbd;
    }

    img {
      height: 0.44rem;
    }
  }

  .list {
    display: inline-block;
    overflow: hidden;
    width: 100%;
    overflow-x: scroll;

    li {
      width: 48.4%;
      margin-bottom: 0.24rem;
      border-radius: 0.16rem;
      background: rgba(255, 255, 255, 0.05);
      overflow: hidden;
      position: relative;

      width: 2.2rem;
      display: inline-block;
      margin-right: 0.24rem;

      .pic {
        // height: 1.92rem;
        position: relative;

        img {
          // height: 100%;
          height: 3rem;
          border-radius: 0.24rem;
          object-fit: cover;
          width: 100%;
        }

        .abs {
          bottom: 0;
          left: 0;
          font-size: 0.2rem;
          display: flex;
          align-items: center;
          width: 100%;
          padding: 0.16rem;

          .v {
            flex: 1;
            display: flex;
            align-items: center;

            img {
              width: 0.2rem;
              height: 0.2rem;
              margin-right: 0.06rem;
              vertical-align: top;
            }
          }
        }

        .str {
          font-size: 0.24rem;
          position: absolute;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            270deg,
            #0571fd 0%,
            #7b02fe 100%,
            #7b02fe 100%
          );
          padding: 0.08rem 0.16rem;
          border-radius: 0.24rem 0rem 0.24rem 0.24rem;

          span {
            line-height: 0.4rem;
            text-align: center;
            display: block;
          }
        }
      }

      button {
        border-radius: 0.8rem;
        background: linear-gradient(90deg, #1b5bff 0%, #c029ff 100%);
        border: 0;
        font-size: 0.24rem;
        color: #fff;
        padding: 0 0.3rem;
        height: 0.48rem;
      }

      .info {
        padding: 0.16rem;

        .title {
          font-size: 0.26rem;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .pingfen {
        margin: 0.12rem 0 0.24rem 0;
        font-size: 0.24rem;
        align-items: center;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}

.videoList:last-child {
  margin-bottom: 1rem;
}

.videoLists {
  margin-bottom: 0.16rem;

  .cname {
    align-items: center;
    color: #fff;
    margin-bottom: 0.24rem;

    .n {
      font-size: 0.32rem;
      font-weight: 600;
      line-height: 0.3rem;
      letter-spacing: 0.015rem;
    }

    .v {
      font-size: 0.24rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #bdbdbd;
    }

    img {
      height: 0.44rem;
    }
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    li {
      width: 30.33%;
      margin-bottom: 0.24rem;
      border-radius: 0.16rem;
      background: rgba(255, 255, 255, 0.05);
      overflow: hidden;
      position: relative;

      display: inline-block;

      .pic {
        // height: 1.92rem;
        position: relative;

        img {
          // height: 100%;
          height: 3rem;
          border-radius: 0.24rem;
          object-fit: cover;
          width: 100%;
        }

        .abs {
          bottom: 0;
          left: 0;
          font-size: 0.2rem;
          display: flex;
          align-items: center;
          width: 100%;
          padding: 0.16rem;

          .v {
            flex: 1;
            display: flex;
            align-items: center;

            img {
              width: 0.2rem;
              height: 0.2rem;
              margin-right: 0.06rem;
              vertical-align: top;
            }
          }
        }

        .str {
          font-size: 0.24rem;
          position: absolute;
          right: 0;
          bottom: 0;
          background: linear-gradient(
            270deg,
            #0571fd 0%,
            #7b02fe 100%,
            #7b02fe 100%
          );
          padding: 0.08rem 0.16rem;
          border-radius: 0.24rem 0rem 0.24rem 0.24rem;

          span {
            line-height: 0.4rem;
            text-align: center;
            display: block;
          }
        }
      }

      button {
        border-radius: 0.8rem;
        background: linear-gradient(90deg, #1b5bff 0%, #c029ff 100%);
        border: 0;
        font-size: 0.24rem;
        color: #fff;
        padding: 0 0.3rem;
        height: 0.48rem;
      }

      .info {
        padding: 0.16rem;

        .title {
          font-size: 0.26rem;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .pingfen {
        margin: 0.12rem 0 0.24rem 0;
        font-size: 0.24rem;
        align-items: center;
      }
    }
  }
}

.Fbottom {
  padding: 0.28rem 0;
}

:root {
  --color: #5952f5;
  --color1: #5bcb9a;
  --color2: #8f9aae;
  --border-bottom: 0.02rem solid #47464a;
  --border: 0.02rem solid #5952f5;
  --backgroundLinear: linear-gradient(113.99deg, #114fee 6.12%, #b654fd 83.22%);
  --backgroundLinear1: linear-gradient(
    135.74deg,
    rgba(17, 79, 238, 0.2) 10.07%,
    rgba(182, 84, 253, 0.2) 99.84%
  );

  --COcolor1: #bdbdbd;
  --COcolor2: #F2C409;
  --COcolor3: #ffffff;
  --COborder1: 0.02rem solid #7b02fe;
  --COborder2: 0.02rem solid #2b2b37;
  --COborder3: 0.02rem solid rgba(255, 255, 255, 0.1);
  --COborder4: 0.02rem solid rgba(255, 255, 255, 0.6);
  --CObackgroundLinear1: linear-gradient(
    270deg,
    #0571fd 0%,
    #7b02fe 100%,
    #7b02fe 100%
  );
  --CObackgroundLinear2: #26292d;
  --CObackgroundLinear3: #121622;
}

.van-dialog__message {
  color: #000;
  font-size: 0.32rem;
}

.startUp {
  background: url("assets/images/bg_qd.jpg") no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  max-width: 8.5rem;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 100%;
  }
}
</style>
